$maxWidth: 540px;
$bodyWith: 750;

@function trimUnit($val) {
    @return $val / ($val * 0 + 1);
}

@function px2rem($val) {
    $res: ();

    @for $i from 1 through length($val) {
        $item: nth($val, $i);

        @if type-of($value: $item)=="number" {
            $item: (trimUnit($item) / trimUnit($bodyWith) * 1rem);
        }

        $res: append($res, $item);
    }

    @return $res;
}

html {
    font-size: 100vw;

    @media screen and (min-width: $maxWidth) {
        font-size: $maxWidth;
    }
}

body {
    margin: 0;
    font-size: p2r(20);
    margin: auto;
    width: 100%;
    height: 100%;
    max-width: $maxWidth;

}

.box {
    padding: px2rem(30);
}

.title {
    font-weight: bold;
    text-align: center;
    font-size: px2rem(28);
    text-align: center;
}

.time {
    font-size: px2rem(22);
    padding-bottom: px2rem(15);
    border-bottom: 1px solid #bbb;
    color: #bbb;
}

.article {
    padding-top: px2rem(15);
    font-size: px2rem(26);
    line-height: 1.6em;

    img {
        max-width: 100%;
    }
}